<template>
  <div>
    <h2 style="text-align: center">发布新课程</h2>
    <el-steps
      :active="active"
      finish-status="success"
      align-center
      style="margin-top: 20px"
    >
      <el-step title="填写课程基本信息"></el-step>
      <el-step title="创建课程大纲"></el-step>
      <el-step title="最终发布"></el-step>
    </el-steps>

    <!-- 章节 小节 -->
    <el-button
      @click="openDialog"
      type="success"
      plain
      style="margin-left: 40px; margin-top: 20px"
      >添加章节</el-button
    >
    <!-- 章节 -->
    <ul class="chanpterList">
      <li v-for="chapter in chapterVideoList" :key="chapter.id">
        <p>
          {{ chapter.title }}
          <span class="acts">
            <el-button type="text" @click="openVideoDialog(chapter.id)"
              >添加小节</el-button
            >
            <el-button
              style=""
              type="text"
              @click="openEditChapterDialog(chapter.id)"
              >编辑</el-button
            >
            <el-button type="text" @click="openDeleteChapterDialog(chapter.id)"
              >删除</el-button
            >
          </span>
        </p>
        <!-- 视频 -->
        <ul class="chanpterList videoList">
          <li v-for="video in chapter.videoVoList" :key="video.id">
            <p>
              {{ video.title }}
              <span class="acts">
                <el-button type="text" @click="openUpdateVideoDialog(video.id)"
                  >编辑1</el-button
                >
                <el-button type="text" @click="openDeleteVideoDialog(video.id)"
                  >删除</el-button
                >
              </span>
            </p>
          </li>
        </ul>
      </li>
    </ul>

    <el-form label-width="120px">
      <el-form-item>
        <el-button @click="previous">上一步</el-button>
        <el-button
          :disabled="saveBtnDisabled"
          style="margin-top: 12px; margin-left: 12px"
          @click="saveOrUpdate"
          type="primary"
          >下一步</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 添加和修改章节的隐藏弹出表单 -->
    <el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
      <el-form :model="chapter" label-width="120px">
        <el-form-item label="章节标题">
          <el-input v-model="chapter.title" />
        </el-form-item>
        <el-form-item label="章节排序">
          <el-input-number
            v-model="chapter.sort"
            :min="0"
            controls-position="right"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAndUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加和修改课时的隐藏弹出表单 -->
    <el-dialog :visible.sync="dialogVideoFormVisible" title="添加课时">
      <el-form :model="video" label-width="120px">
        <el-form-item label="课时标题">
          <el-input v-model="video.title" />
        </el-form-item>
        <el-form-item label="课时排序">
          <el-input-number
            v-model="video.sort"
            :min="0"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="是否免费">
          <el-radio-group v-model="video.isFree">
            <el-radio :label="0">免费</el-radio>
            <el-radio :label="1">默认</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传视频">
          <!-- TODO -->
          <el-upload
            class="upload-demo"
            :action="BASE_API + '/eduvod/video/uploadAliyunVideo'"
            :on-success="handlerVedioSuccessUpload"
            :before-remove="handlerVedioBeforeRemove"
            :on-remove="handlerVedioOnRemove"
            :on-exceed="handlerVedioOnExceed"
            :file-list="fileList"
            :limit="1"
          >
            <el-button size="small" type="primary">上传视频</el-button>
            <el-tooltip placement="right-end">
              <i class="el-icon-question"></i>
              <div slot="content">
                最大支持1G <br />
                支持3GP、ASF、MP4等视频格式上传 <br />
              </div>
            </el-tooltip>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVideoFormVisible = false">取 消</el-button>
        <el-button
          :disabled="saveVideoBtnDisabled"
          type="primary"
          @click="saveOrUpdateVideo"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import chapterAPI from "@/api/edu/chapter";
import videoAPI from "@/api/edu/video";
export default {
  name: "Chapter",
  data() {
    return {
      active: 2,
      saveBtnDisabled: false,
      courseId: "", //课程id
      chapterVideoList: [], //用于显示的

      //用于章节添加
      dialogChapterFormVisible: false,
      dialogVideoFormVisible: false,
      chapter: {
        title: "",
        sort: 0,
      }, //封装章节属性

      //用于小节对象存储
      saveVideoBtnDisabled: false,
      video: {
        title: "",
        sort: 0,
        isFree: 0,
        videoSourceId: "",
        videoOriginalName: "",
      },

      //用于视频上传
      BASE_API: process.env.BASE_API,
      fileList: [],
    };
  },
  created() {
    //获取路由的id值
    // console.log("@@@");
    if (this.$route.params && this.$route.params.id) {
      this.courseId = this.$route.params.id;
    }
    // console.log(this.courseId);
    this.getChapterAndVideo();
  },

  methods: {
    //=========================视频操作 ============================
    //上传成功
    handlerVedioSuccessUpload(response, file, fileList) {
      console.log(response);
      this.video.videoSourceId = response.data;
      this.video.videoOriginalName = file.name;
    },
    //二次 上传之前提示删除上一次
    handlerVedioOnExceed(files, fileList) {
      this.$message.warning("想要重新上传视频请删除此视频");
    },
    //点击取消时弹出消息
    handlerVedioBeforeRemove(file, fileList) {
      return this.$confirm(`确定移除${file.name}?`);
    },
    //点击取消中确认框
    handlerVedioOnRemove() {
      /**
       * 1. 点击确认框
       * 2. 调用删除接口
       * 3. 提示用户删除成功
       * 4. 把文件列表清空
       */
      videoAPI
        .deleteVedioByVedioId(this.video.videoSourceId)
        .then((response) => {
          this.$message({
            type: "success",
            message: "删除视频成功！",
          });
          //把上传列表中的值清空  和上一次视频id和值清空
          this.fileList = [];
          this.video.videoSourceId = "";
          this.video.videoOriginalName = "";
        });
    },
    //=========================小节操作 ============================

    //弹出添加小节form表单(清楚再查找时video留下的数据)
    openVideoDialog(chapterId) {
      //在video中添加当前课程和章节的id
      this.video.title = "";
      this.video.sort = 0;
      this.video.isFree = 0;
      this.video.chapterId = chapterId;
      this.video.courseId = this.courseId;
      this.dialogVideoFormVisible = true;
    },

    //弹出修改小节form表单-->updateVideo()
    openUpdateVideoDialog(videoId) {
      /**
       * 1. 获取当前的video的值
       * 2. 打开对话框
       * 3. 修改按钮
       */

      videoAPI.getVideo(videoId).then((response) => {
        this.video = response.data;
        this.fileList = this.video.videoOriginalName;
      });
      this.dialogVideoFormVisible = true;
    },

    //添加修改小节功能
    saveOrUpdateVideo() {
      /**
       * 判断何时添加 修改
       */
      if (!this.video.id) {
        this.saveVideo();
      } else {
        this.updateVideo();
      }
    },
    //添加小节
    saveVideo() {
      /**
       * 1. 发起请求修改
       * 2. 提示用户添加成功
       * 3. 刷新页面
       */
      this.fileList = "";
      videoAPI.addVideo(this.video).then((response) => {
        this.$message({
          type: "success",
          message: "添加课程成功",
        });
        this.dialogVideoFormVisible = false;
        //刷新
        this.getChapterAndVideo();
      });
    },
    updateVideo() {
      /**
       * 1. 点击确认修改之后关闭表单
       * 2. 弹出修改成功
       * 3. 刷新页面嘛
       */
      videoAPI.updateVideo(this.video).then((response) => {
        this.dialogVideoFormVisible = false;
        this.$message({
          type: "success",
          message: "修改章节成功",
        });

        this.getChapterAndVideo();
      });
    },

    //删除小节
    openDeleteVideoDialog(videoId) {
      this.$confirm("此操作讲删除该小节所有信息，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        /**
         * 1. 如果点击确认 则进行删除
         * 2. 弹出删除成功的消息
         * 3. 刷新页面
         */
        videoAPI.deleteVideoByVideoId(videoId).then((response) => {
          this.$message({
            type: "success",
            message: "删除章节成功",
          });

          this.getChapterAndVideo();
        });
      });
    },

    //==========================章节操作 ==========================

    //修改章节标题
    openEditChapterDialog(capterId) {
      /**
       * 先查询章节 然后拉开弹框
       */
      chapterAPI.getChapterById(capterId).then((response) => {
        this.chapter = response.data;
      });
      this.dialogChapterFormVisible = true;
    },

    //删除章节所有
    openDeleteChapterDialog(capterId) {
      /**
       * 弹出消息确认所有删除
       * 开始删除
       */
      console.log(capterId);
      this.$confirm("此操作讲删除该章节所有信息，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //函数体
        chapterAPI.deleteChapterInfoAndVide(capterId).then((response) => {
          this.$message({
            type: "success",
            message: "删除成功",
          });
          //刷新页面 别放外面去了
          this.getChapterAndVideo();
        });
      });
    },

    //修改每次弹框的时候数据任然存在的Bug
    openDialog() {
      this.dialogChapterFormVisible = true;
    },

    //调用添加修改章节
    saveAndUpdate() {
      //如果id有 就修改
      if (this.chapter.id) {
        this.updateChapter(this.chapter);
      } else {
        //添加
        this.addChapter();
      }
    },

    //添加章节方法
    addChapter() {
      this.chapter.courseId = this.courseId;
      chapterAPI.addChapter(this.chapter).then((response) => {
        /**
         * 1. 关闭此功能框
         * 2. 添加成功 弹框
         * 3. 刷新页面 ==再一次查询章节小节
         */
        this.dialogChapterFormVisible = false;

        this.$message({
          type: "success",
          message: "添加章节成功",
        });

        //清除chapter中的值
        this.chapter.title = "";
        this.chapter.sort = 0;
        this.getChapterAndVideo();
      });
    },

    //修改章节TODO
    updateChapter() {
      chapterAPI.updateChapterInfo(this.chapter).then((response) => {
        /**
         * 1. 关闭此功能框
         * 2. 添加成功 弹框
         * 3. 刷新页面 ==再一次查询章节小节
         */
        this.dialogChapterFormVisible = false;

        this.$message({
          type: "success",
          message: "修改章节成功",
        });

        //清除chapter中的值
        this.chapter.title = "";
        this.chapter.sort = 0;
        this.getChapterAndVideo();
      });
    },

    //查询章节 小节的方法
    getChapterAndVideo() {
      chapterAPI.getChapterAndVideo(this.courseId).then((response) => {
        this.chapterVideoList = response.data.allChapterVideo;
      });
    },

    //上一步
    previous() {
      this.$router.push({ path: `/course/info/${this.courseId}` });
    },
    //下一步
    saveOrUpdate() {
      this.$router.push({ path: `/course/publish/${this.courseId}` });
    },
  },
};
</script>

<style scope>
.chanpterList {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chanpterList li {
  position: relative;
}
.chanpterList p {
  /* float: left; */
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #ddd;
}
.chanpterList .acts {
  float: right;
  font-size: 14px;
}
.videoList {
  padding-left: 50px;
}
.videoList p {
  /* float: left; */
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dotted #ddd;
}
</style>